<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no">
<link rel="stylesheet" href="http://at.alicdn.com/t/font_342477_owwvl7ndgo.css?v=1.0.0">
<title>下单</title>

<link rel="stylesheet" type="text/css" href="__JS__/mobileSelect/css/mobileSelect.css">
<script src="__JS__/mobileSelect/js/mobileSelect.min.js" type="text/javascript"></script>

<link type="text/css" rel="stylesheet" href="/static/css/s.common.css">
<link type="text/css" rel="stylesheet" href="/static/css/s.agent.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="/static/js/common.js"></script>
<style type="text/css">
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{margin:0}
*, :after, :before {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html{font-size:50px}
body{
-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:32px;background-color:#f5f5f9
}
body{line-height:40px!important;font-size:26px!important}
body,body.g-init-echart{font-family:Microsoft YaHei,Helvetica!important;color:#2e3136;background:#f5f6f7!important}
button, input, optgroup, select, textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
button, input {
    overflow: visible;
}

.v-goods-cart ._select {
    display: inline-block;
    width: 44px;
    height: 44px;
    border: 1px solid #9b9b9b;
    border-radius: 100%;
    text-align: center;
    line-height: 44px;
    color: #fff;
    margin: 0 30px 0 10px;
    background: #fff;
}
.v-goods-cart ._select._allSelected, .v-goods-cart ._select._selected, .v-goods-cart ._select._selected._cloud {
    background: #fa6f60;
    border-color: #fa6f60;
}
.c-share-back {
    position: fixed;
    width: 100%;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 200px;
    z-index: 9;
    padding-left: 50px;
}
.c-share-back .__content {
    float: left;
    width: 70px;
}
.c-share-back .__icon {
    float: right;
    border-radius: 100%;
    text-align: center;
    background: rgba(0,0,0,.5);
    line-height: 70px;
    height: 70px;
    width: 70px;
    margin-top: -70px;
    color: #fff;
    font-size: 50px;
}

.shop-list-goods-fix{
	/*position: absolute!important;right:0; */
	margin-right:40px;
	border: none;
    background: rgb(255, 255, 255);
}
.shop-list-goods-reduce{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: #5ba2e4;

}
.shop-list-goods-reduce:after {
    content: "\E685";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    background: #fff;
    top: 0;
    left: 0;
    color: #999;
}
.shop-list-goods-amount{
	float: left;
    width: 150px;
    color: #333;
    height: 60px;
    line-height: 60px;
    text-align: center;
    font-size: 30px;
    background-color: #fff;
    padding: 0 15px;
	border: 1px solid rgb(232, 232, 232);
    background: rgb(241, 241, 241);
	-webkit-appearance:none;
	outline:0;
}
.shop-list-goods-add{
	float:left;
	width: 48px!important;
    height: 48px!important;
    color: #9c9fa6;
    background: #fff;
    text-align: center;
    line-height: 48px;
    position: relative;
    margin-top: 6px;
	color: transparent!important;
	font-weight: 400;
    font-style: normal;
    display: inline-block;
}
.shop-list-goods-add:after {
    content: "\E71E";
    font-size: 46px;
    font-family: iconfont;
    position: absolute;
    color: #1b9af9;
    top: 0;
    left: 0;
}
.cart-remove-box{
	-webkit-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2; 
	justify-content: flex-end;
    align-items: center;
    display: flex;
}
span.cart-remove{ width:80px;height:100%; background:#9C9FA6; color:#ffffff; justify-content:center; align-items:center; display:flex; }
.g-radiu{ border:1px solid #fa6f60; line-height:50px; padding:0 20px; border-radius:25px;color:#fa6f60; }

.address-select-box{ display:flex; height:150px; width:100%; background:url(__IMG__/address_bg.png) #FEFFFF repeat-x left top; }
.location{ width:60px; height:100%; display:flex;justify-content:center; align-items:center;  }
.address-info{ flex:1; display:flex; align-items:center; }
.address-info div{}
.address-info p{ padding:4px 0; line-height:1.4em; }
.address-select{ width:60px; height:100%; display:flex;justify-content:center; align-items:center;}
</style>
</head>

<script>

</script>
<body>

<div id="pages">
    <div>
        <div>
            <div class="g-reset g-col g-warp-scroll common-bs-wrapper" style="overflow: hidden;">
                <div class="__scroller" style="transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
                    <div class="g-reset g-pd g-orange">请仔细核对订单信息</div>
					<div class='address-select-box'>
					
						<div class='location'><img src='__IMG__/location.png'></div>
						<div class='address-info'>
							{notempty name='data.address'}
							<div>
							<p><span id='consignee'>{$data.address.consignee}</span>　<span id='phonenum'>{$data.address.phonenum}</span><span style="display: inline-block;background: #5c8dff;color: #ffffff;padding: 0 14px; border-radius: 18px;line-height: 36px;margin-left:8px;display:none;">默认</span></p>
							<p id='address_full'>{$data.address.province}{$data.address.city}{$data.address.region}{$data.address.address}</p>
							</div>
							{else /}
							<div>
							<p><span id='consignee'>请选择收货地址</span><span id='phonenum'>&nbsp;</span></p>
							<p id='address_full'><span style='color:#a2a2a2;'>您尚未设置默认收货地址</span></p>
							</div>
							{/notempty}
						</div>
						<div class='address-select'>
							<img src='__IMG__/right.png'>
						</div>
						
					</div>
                    <div class="g-reset g-flex g-fd-c g-m-b">
                        <div>
							{volist name='data.product' id='v'}
                            <div class="g-pd g-bb" style="background-color: rgb(249, 249, 249);">
                                <div class="g-flex">
                                    <img src="{$v.productmainimg}" alt="" class="g-img-140">
                                    <div class="g-flex g-fd-c g-col g-pd-lr g-jc-sb">
                                        <div class="g-flex g-jc-sb">
                                            <div class="g-twoline g-col">{$v.productname}</div>
                                            <div>
                                                <p class="g-orange-dark">￥{$v.productprice}</p></div>
                                        </div>
                                        <div class="g-flex g-jc-sb">
                                            <span class="g-black-light"></span>
                                            <span class="g-black-middle g-pd-l">X{$v.buynum}</span>
										</div>
                                    </div>
                                </div>
                            </div>
                            {/volist}
                        </div>
                    </div>
					
					<div class="g-form g-bb">
                        <div class="__item">
                            <label for="express_id_select">快递</label>
							<div style="flex:1;padding-right:40px;background:url(__IMG__/right.png) no-repeat right center;" id='express_id_select'>{$express.default.value}</div>
						</div>
                    </div>
					
					<div class="g-form g-bb">
                        <div class="__item">
                            <label for="oMsg">买家留言</label>
                            <input type="text" id="oMsg" placeholder="选填，请在这里留下您的要求" value=""></div>
                    </div>
					
                    <div class="g-reset g-flex g-fd-c g-bg-white g-pd g-m-b">
                        <div class="g-flex g-jc-sb 2095">
                            <div>商品总价</div>
                            <div class="g-orange-dark">
                                <p class="">￥{$data.orderamount}</p>
							</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="g-bg-white">
                <div class=" g-bt g-reset g-fixed g-tr" style="z-index: 10;">
                    <div class="g-lh-80 g-tr g-col g-pd-r g-inline">内购金额加运费：
                        <div class=" g-inline">
                            <p class="g-orange-dark g-inline">￥<span id='neigouANDyunfei'><?php
							$d = $express['default']['expressprice'] + $data['cashamount'];
							echo $d;
							?></span></p>
						</div>，货款金额：
                        <div class=" g-inline">
                            <p class="g-orange-dark g-inline">￥{$data.orderamount}</p>
						</div>
                    </div>
                    <div class="g-bg-blue g-lh-80 g-tc g-inline" id="order-add" style="width: 150px;">提交订单</div></div>
            </div>
        </div>
    </div>
</div>



<div id="ios-hack-view"></div>




<!--编辑地址-->
<div class="g-reset g-am-init g-reset-fixed address-edit-box" style='display:none;'>
<div class="g-bg-fixed"></div>
<div class="g-fixed g-row" style="z-index: 50;">
<p class="g-close-position "><span class='address-edit-title'>选择收货地址</span><i class="iconfont icon-close"></i></p>
<div class="g-pd-lr address-select-box2" style="position:relative; height:500px; overflow-y: hidden; overflow-x:hidden;">

<div class="am-list address-box" style="width:100%;height:100%;left:0;top:0;position:absolute;">
   <iframe src="{:url('Shopaddress/index')}?onlyselect=1&r=<?php echo rand(100,999);?>" style="box-sizing:border-box;width:100%; height:100%; position:absolue;left:0;top:0;" frameborder='0'></iframe>
</div>

</div>
</div>
</div>
<!--编辑地址-->


<style>
.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}

.mobileSelect .content .btnBar {
    border-bottom: 2px solid #DCDCDC;
    font-size: 30px;
    height: 90px;
    line-height: 90px;
}
.mobileSelect .content .btnBar .cancel, .mobileSelect .content .btnBar .ensure {
    height: 90px;
    width: 110px;
}
.mobileSelect .content .panel .wheel {
    height: 400px;
}
.mobileSelect .content .panel .wheel .selectContainer li {
    font-size: 30px;
    height: 80px;
    line-height: 80px;
}
.mobileSelect .content .panel .wheels {
    width: 100%;
    height: 400px;

}
.mobileSelect .content .panel .selectLine {
    height: 80px;
    width: 100%;
    top: 160px;
    border-top: 2px solid #DCDCDC;
    border-bottom: 2px solid #DCDCDC;
}
.mobileSelect .content .panel .shadowMask{
	height:400px;
}
.mobileSelect .content .btnBar .title{ font-size:30px; }
.layui-layer-loading .layui-layer-content{ width:120px; height:48px; background-size:cover; }
.layui-m-layer-msg .layui-m-layercont{ font-size:28px; line-height:44px; padding:20px 40px;}
.layui-m-layer2 .layui-m-layercont i{ background:#5c8dff; }
</style>

<script>
var orderInfo = {
	address : {
		tsid : {empty name='data.address'}""{else /}"{$data.address.tsid}"{/empty},
		consignee : {empty name='data.address'}""{else /}"{$data.address.consignee}"{/empty},
		phonenum : {empty name='data.address'}""{else /}"{$data.address.phonenum}"{/empty},
		province : {empty name='data.address'}""{else /}"{$data.address.province}"{/empty},
		city : {empty name='data.address'}""{else /}"{$data.address.city}"{/empty},
		region : {empty name='data.address'}""{else /}"{$data.address.region}"{/empty},
		address : {empty name='data.address'}""{else /}"{$data.address.address}"{/empty}
	},
	products : {$products},
	orderamount : {$data.orderamount},
	cashamount : {$data.cashamount},
	expressid : "{$express.default.id}",
	remark : ''
};

var expressList = {$express.listfull};

$(function(){
	let _height = $(window).height();
	$('.address-select-box2').css('height',_height * 0.8);
	//提交订单
	$("#order-add").click(function(){
		//$('.g-reset-fixed,.g-row-payment').css('display','block');
		orderInfo.remark = $('#oMsg').val();
		if(orderInfo.address.tsid == ''){
			layerMsg('请选择收货地址'); return;
		}
		if(orderInfo.expressid == ''){
			layerMsg('请选择快递'); return;
		}
		$.post("{:url('Shop/order_add')}",{'data':JSON.stringify(orderInfo)},function(e){
			if(e.flag){
				location.href = "{:url('Shop/pay')}?orderid="+e.data;
			}else{
				layerMsg(e.info);
			}
		},'JSON');
	});
	//关闭支付方式
	$('.icon-close').click(function(){
		$('.g-reset-fixed,.g-row-payment').css('display','none');
	});
	//
	$('.g-up-pz').click(function(){
		layer.open({
			content: '上传中'
			,skin: 'msg'
			,time: 2
		});
	});
	
	//选择地址
	$('.address-select,.address-info').click(function(){
		$('.address-edit-box').css('display','block');
	});
});
//选择新的收货地址
function afterSelectAddress(data){

	$('.address-edit-box').css('display','none');
	
	if(orderInfo.address.tsid != data.tsid){
		//重新计算快递费
		let pd = {
			'tsid':data.tsid,
			'products':JSON.stringify(orderInfo.products)
		};
		
		let loadindex = layer.open({type: 2});
		$.ajax({
			url : "{:url('Shop/changeaddress')}",
			type : "POST",
			dataType : "JSON",
			data : pd,
			success : function(e){
				console.log(e);
				if(!e.flag){ return; }
				expressList = e.data.list;
				console.log(expressList);
				
				if(typeof expressList[orderInfo.expressid] != 'undefined'){
					let expressprice = expressList[orderInfo.expressid]['expressprice'];
					let t = orderInfo.cashamount + expressprice;
					$('#neigouANDyunfei').html(t);
				}
			},error : function(){
			},complete : function(){
				layer.close(loadindex);
			}
		});
	}
	orderInfo.address.tsid = data.tsid;
	orderInfo.address.consignee = data.consignee;
	orderInfo.address.phonenum = data.phonenum;
	orderInfo.address.province = data.province;
	orderInfo.address.city = data.city;
	orderInfo.address.region = data.region;
	orderInfo.address.address = data.address;
	
	$('#address_full').html(data.province+''+data.city+''+data.region+''+data.address);
	$('#consignee').html(data.consignee);
	$('#phonenum').html(data.phonenum);
}
var expressSelect = new MobileSelect({
    trigger: '#express_id_select',
    title: '快递选择',
    wheels: [
        {
			data : {$express.list}
		}
    ],
    position:[{$express.default.index}],
	callback:function(indexArr, data){
		orderInfo.expressid = data[0].id;
		if(typeof expressList[orderInfo.expressid] != 'undefined'){
			let expressprice = expressList[orderInfo.expressid]['expressprice'];
			let t = orderInfo.cashamount + expressprice;
			$('#neigouANDyunfei').html(t);
		}
	}
});
</script>

</body>
</html>